<template>
	<view>
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单详情</block>
		</cu-custom>
		
		<view class="map_box" style="z-index: -1;">
		  <map id="navi_map" longitude="116.451028" latitude="39.949643" scale="12" :markers="markers" :polyline="polyline"></map>
		</view>
		
		<view>
			<view class="text_box">
			  <view class="text" v-if="orderDatil.status == 2">距离您{{distance}}</view>
			  <view class="button_box">
			  	<!-- <button @tap="openMap()" class="bg-white cu-btn round shadow">打开内置地图</button> -->
			  	<text @tap="openMap()" class="text text-red text-bold" style="z-index: 101;">点我打开内置地图</text>
			  </view>
			</view>
		</view>
		
		<view style="position: absolute;top: 730rpx;width: 100%;">
			<!-- 订单详情 -->
			<view class="cu-card " >
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view style="height: 80rpx;margin-left: 10rpx;line-height: 80rpx;">
						<text class='cuIcon-title text-blue'></text>
						维修类型：
						<text>
							{{ orderDatil.serviceName }}
						</text>
					</view>
				</view>
			</view>	
			<view class="cu-card " >
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view style="height: 80rpx;margin-left: 10rpx;line-height: 80rpx;">
						<text class='cuIcon-title text-blue'></text>
						维修费用：
						<text class="text-price text-red text-xl">
							{{ orderDatil.realAmount }}
						</text>
					</view>
				</view>
			</view>	
			<view class="cu-card " >
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view style="height: 80rpx;margin-left: 10rpx;line-height: 80rpx;">
						<text class='cuIcon-title text-blue'></text>
						联系人：
						<text>
							{{ orderDatil.contact }}
						</text>
					</view>
				</view>
			</view>	
			<view class="cu-card " >
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view style="height: 80rpx;margin-left: 10rpx;line-height: 80rpx;">
						<text class='cuIcon-title text-blue'></text>
						联系人手机号：
						<text>
							{{ orderDatil.mobile }}
						</text>
					</view>
				</view>
			</view>	
			<view class="cu-card " >
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view style="height: 80rpx;margin-left: 10rpx;line-height: 80rpx;">
						<text class='cuIcon-title text-blue'></text>
						创建时间：
						<text>
							{{ orderDatil.createdTime }}
						</text>
					</view>
				</view>
			</view>	
			
			<view class="cu-card">
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view class="flex flex-column align-center solid-bottom" style="margin-left: 10rpx;line-height: 60rpx;">
						<text class='cuIcon-title text-blue'></text>
						维修描述
					</view>
					<view class="padding-sm">
						<text style="line-height: 55rpx;">
							{{ orderDatil.serviceDescripion }}
						</text>
					</view>
				</view>
			</view>	
			
			<view class="cu-card">
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view class="flex flex-column align-center solid-bottom" style="margin-left: 10rpx;line-height: 60rpx;">
						<text class='cuIcon-title text-blue'></text>
						备注
					</view>
					<view class="padding-sm">
						<text style="line-height: 55rpx;">
							{{ orderDatil.remark }}
						</text>
					</view>
				</view>
			</view>	
			
			<view class="cu-card">
				<view class="cu-item shadow cu-card-custom" style="margin: 10rpx;">
					<view class="flex flex-column align-center solid-bottom" style="margin-left: 10rpx;line-height: 60rpx;">
						<text class='cuIcon-title text-blue'></text>
						故障照片
					</view>
					<view class="padding-sm">
						<view v-for="item in imgs" :key="item.id" style="height: 300rpx;width: 100%;">
							<image @tap="viewImg" :src="handleImg(item)"
							 mode="top" style="width: 100%;height: 250rpx;"></image>
						</view>
					</view>
				</view>
			</view>	
			
			<view style="position: fixed;bottom: 30rpx;left: 30rpx;">
				<view v-if="orderDatil.status == 2" @tap="grab" class="flex justify-center align-center bg-gradual-orange"
				style="height: 150rpx;width: 150rpx;border-radius: 50%;">
					<text style="color: white;font-weight: bold;">
						立即抢单
					</text>
				</view>
				<view v-else-if="orderDatil.status == 3" @tap="overOrder()"  class="flex justify-center align-center bg-gradual-blue"
				style="height: 150rpx;width: 150rpx;border-radius: 50%;">
					<text style="color: white;font-weight: bold;">
						拍摄现场
					</text>
				</view>
			</view>
		</view>
		
		<!-- 确认抢单窗口 -->
		<view class="cu-modal" :class="modalName=='dialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认抢单</view>
					<view class="action" @tap="hiddenModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{ $util.getDicByKey("grabSingle") }}
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hiddenModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="sureModal">确定</button>
		
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import amapFile from '../../common/amap-wx.js'
	import util from '../../common/util.js'
	
	export default {
		data() {
			return {
				orderDatil: '',
				latitude: 39.90816,
				longitude: 116.434446,
				markers: [{
				  iconPath: "../../static/img/mapicon_navi_s.png",
				  id: 0,
				  latitude: 39.989643,
				  longitude: 116.481028,
				  width: 23,
				  height: 33
				},{
				  iconPath: "../../static/img/mapicon_navi_e.png",
				  id: 0,
				  latitude: 39.90816,
				  longitude: 116.434446,
				  width: 24,
				  height: 34
				}],
				distance: '',
				cost: '',
				polyline: [],
				modalName: '',
				baseImg: '',
				imgs: []
			}
		},
		onLoad(option) {
			this.baseImg = this.$api.baseImg
			this.orderDatil = uni.getStorageSync('orderDatil')
			this.imgs = this.orderDatil.scenePhoto.split(',')
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					// 地图中心位置
					that.latitude = res.latitude
					that.longitude = res.longitude
				}
			});
			
			// 驾车路线图
			this.origin = this.longitude + ',' + this.latitude
			this.destination = this.orderDatil.location.longitude + ',' + this.orderDatil.location.latitude
			
			// 地图标记点
			this.markers[0].latitude = this.orderDatil.location.latitude
			this.markers[0].longitude = this.orderDatil.location.longitude
			
			this.markers[1].latitude = this.latitude
			this.markers[1].longitude = this.longitude
			this.initMap()
		},
		methods: {
			overOrder(){
				uni.navigateTo({
					url: '../overOrder/overOrder'
				})
			},
			openMap(){
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function () {
								console.log('success');
							}
						});
					}
				});
			},
			handleImg(e){
				return this.baseImg + e
			},
			failOrder(){
				//抢单失败
				uni.showToast({
					title: '已经被抢走了，下次快点哦',
					duration: 2000,
					icon: 'none'
				});
				//返回首页
				setTimeout(function () {
					uni.reLaunch({
						url: '../main/main'
					})
				}, 2000);
			},
			successOrder(){
				//抢单成功
				uni.showToast({
					title: '抢单成功',
					duration: 1000,
					icon: 'none'
				});
				//返回首页
				setTimeout(function () {
					//跳转地图页面
					uni.navigateTo({
						url: '../orders/orders'
					})
				}, 1000);
			},
			sureModal(){
				let that = this
				// 先获取当前用户的位置信息，再提交订单
				uni.getLocation({
					type: 'wgs84',
					success: function (locationRes) {
						let data = {
							orderId: that.orderDatil.id,
							location: JSON.stringify(locationRes)
						}
						//提交订单
						that.$api.takeOrder(data).then((res)=>{
							uni.hideLoading();
							if(res.data.status == 200){
								//抢单成功
								that.successOrder()
							}else{
								//抢单失败
								that.failOrder()
							}
						}).catch((err)=>{
							uni.hideLoading();
							that.failOrder()
							console.log('request fail', err);
						})
					}
				});
			},
			hiddenModal(){
				this.modalName = ''
			},
			grab(){
				this.modalName = 'dialogModal'
			},
			viewImg(){
				uni.previewImage({
					urls: this.imgs.map(e => this.baseImg + e),
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			initMap(){
				var that = this;
				var myAmapFun = new amapFile.AMapWX({key: util.getDicByKey('amapKey')});
				myAmapFun.getDrivingRoute({
				  origin: this.origin,
				  destination: this.destination,
				  success: function(data){
					var points = [];
					if(data.paths && data.paths[0] && data.paths[0].steps){
					  var steps = data.paths[0].steps;
					  for(var i = 0; i < steps.length; i++){
						var poLen = steps[i].polyline.split(';');
						for(var j = 0;j < poLen.length; j++){
						  points.push({
							longitude: parseFloat(poLen[j].split(',')[0]),
							latitude: parseFloat(poLen[j].split(',')[1])
						  })
						} 
					  }
					}
					that.polyline = [{
						points: points,
						color: "#0091ff",
						width: 6
					  }]
					if(data.paths[0] && data.paths[0].distance){
						that.distance = Number(Number(data.paths[0].distance) / 1000).toFixed(2) + '千米'
					}
				  },
				  fail: function(info){
				
				  }
				})
			}
		}
	}
</script>

<style>
	
	.flex-style{
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	}
	.flex-item{
	  height: 35px; 
	  line-height: 35px;
	  text-align: center;
	  -webkit-box-flex: 1;
	  -webkit-flex: 1;
	  flex: 1
	}
	.flex-item.active{
	  color:#0091ff;
	}
	.map_box{
	  position:absolute;
	  top: 130rpx;
	  bottom: 620rpx;
	  left: 0px;
	  right: 0px;
	}
	#navi_map{
	  width: 100%;
	  height: 100%;
	}
	.text_box{
	  position:absolute;
	  height: 90px;
	  top: 630rpx;
	  left: 10px;
	  right: 0px;
	  z-index: 101;
	}
	.detail_button{
	  position:absolute;
	  bottom: 30px;
	  right: 10px;
	  padding: 3px 5px;
	  color: #fff;
	  background: #0091ff;
	  width:50px;
	  text-align:center;
	  border-radius:5px;
	}

</style>
